<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>牧心农业</title>
    <link rel="stylesheet" type="text/css" href="/static/css/eui.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/mobile.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/iconfont.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/doT.min.js"></script>
    <script src="/static/js/func.js"></script>
</head>
<body>
    <div class="content margin_top_foot">
        <header class="header fixed_top bg_mx_green"></header>
        <form class="form">
            <div class="padding_15 bg_white flex border_b">
                <div class="width_50">标题</div>
                <div class="left_50">
                    <input type="text" name="title" value="" placeholder="请输入标题" request title="标题">
                </div>
            </div>
            <div class="days"></div>
            <div class="flex padding_10_15 mx_green block_inline">
                <div class="padding_r_10 border_r" onclick="addday(this)">
                    <span class="iconfont icon-add font_16"></span> 新增一天
                </div>
                <div class="padding_l_10" onclick="delday(this)">
                    <span class="iconfont icon-del font_16"></span> 删除一天
                </div>
            </div>
            <div class="padding_15 text_center">
                <button class="btn btn_mx_green all_width lineheight_3">保存</button>
            </div>
        </form>
        <footer class="foot_tab fixed_bottom mx_green font_16"></footer>
    </div>
    <div class="toast"></div>
    <!-- toast模版 -->
    <script type="text/template" charset="utf-8" id='toast_template'>
        <i class="iconfont icon-toast{{=it.icon}}"></i>
        <div class="toast_text">{{=it.text}}</div>
    </script>
    <script type="text/template" charset="utf-8" id='day_template'>
        <div class="bg_white margin_b_10 day">
            <div class="spots">
                <div class="padding_15 border_b spot">
                    <div class="lineheight_2 h_justify">
                        <div class="dayno">第{{=it.n+1}}天</div>
                        <div>
                            <span class="mx_green sno">第1站</span> 
                            <span class="iconfont icon-location1 mx_green"></span> 
                            <span class="light">地址</span>
                        </div>
                    </div>
                    <div class="padding_15 bg_white margin_b_10 border_b border_t">
                        <div class="preview{{=it.n}}0 flex_row_3 margin_b_10" style="display:none;"></div>
                        <div class="light lineheight_3 v_center input{{=it.n}}0">
                            <div class="width_50 border text_center relative">
                                <div class="iconfont icon-add font_20"></div>
                                <input class="absolute all" type="file" value="" accept="image/*" style="opacity:0;" onchange="selectpic(this,{{=it.n}},0)"/>
                            </div>
                            <div class="left_50  padding_l_15">点击上传图片</div>
                        </div>
                    </div>
                    <div class="text_info padding_v_10">
                        <textarea class="info{{=it.n}}0" name="info{{=it.n}}0" placeholder="请填写您的旅游心情吧" request title="您的旅游心情"></textarea>
                    </div>
                </div>
            </div>
            <div class="row font_12 padding_10_15">
                <div class="pull_right label_mx_green padding_h_5 circle_5" onclick="addspot(this,{{=it.n}})">新增一站</div>
                <div class="pull_right label_mx_green padding_h_5 circle_5 hide" onclick="delspot(this,{{=it.n}})">删除一站</div>
            </div>
        </div>
    </script>
    <script type="text/template" charset="utf-8" id='spot_template'>
        <div class="padding_15 border_b spot">
            <div class="lineheight_2 h_justify">
                <div class="dayno"></div>
                <div>
                    <span class="mx_green sno">第{{=it.i+1}}站</span> 
                    <span class="iconfont icon-location1 mx_green"></span> 
                    <span class="light">地址</span>
                </div>
            </div>
            <div class="padding_15 bg_white margin_b_10 border_b border_t">
                <div class="preview{{=it.n}}{{=it.i}} flex_row_3 margin_b_10" style="display:none;"></div>
                <div class="light lineheight_3 v_center input{{=it.n}}{{=it.i}}">
                    <div class="width_50 border text_center relative">
                        <div class="iconfont icon-add font_20"></div>
                        <input class="absolute all" type="file" value="" accept="image/*" style="opacity:0;" onchange="selectpic(this,{{=it.n}},{{=it.i}})"/>
                    </div>
                    <div class="left_50  padding_l_15">点击上传图片</div>
                </div>
            </div>
            <div class="text_info padding_v_10">
                <textarea class="info{{=it.n}}{{=it.i}}" name="info{{=it.n}}{{=it.i}}" placeholder="请填写您的旅游心情吧" request title="您的旅游心情"></textarea>
            </div>
        </div>

    </script>
    <script type="text/template" charset="utf-8" id='img_template'>
        {{for(var j=0;j<it.d.length;j++){}}
        <div class="row_one relative">
            <div class="del_img" onclick="del(this,{{=it.n}},{{=it.i}},{{=j}})">&times;</div>
            <img class="all_height" src="{{=it.d[j]}}">
        </div>
        {{}}}
    </script>
    <input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
    <input name="hid" type="hidden" id="hid" value="<{$app->request->get('hid')}>">
    <input name="oid" type="hidden" id="oid" value="<{$app->request->get('oid')}>">
    <script>
        // 页面初始化
            var evalday = doT.template($("#day_template").text());
            var evalspot = doT.template($("#spot_template").text());
            var evalToast = doT.template($("#toast_template").text());
            var img_arr=[[[]]],imgs=[[[]]],info=[],evalImg = doT.template($("#img_template").text());
            loaddata(".days",evalday,{n:0})
            loadheadbar("新增游记");
            loadfootbar()
        // 新增一天
            function addday(obj){
                var len = $(".day").length;
                img_arr.push([[]]);
                imgs.push([[]]);
                $(".days").append(evalday({n:len}));
            }
            function delday(obj){
                var len = $(".day").length;
                img_arr.splice(len-1,1);
                imgs.splice(len-1,1);
                $(obj).parent().prev().find(".day:last-child").remove();
            }
        // 新增一站
            function addspot(obj,n){
                var ele_parent = $(obj).parent().prev(".spots");
                var len = ele_parent.find(".spot").length;
                img_arr[n].push([]);
                imgs[n].push([]);
                ele_parent.append(evalspot({n:n,i:len}));
                $(obj).next().show();
            }
            function delspot(obj,n){
                var len = $(obj).parent().prev().find(".spot").length;
                img_arr[n].splice(len-1,1);
                imgs[n].splice(len-1,1);
                $(obj).parent().prev().find(".spot:last-child").remove();
                if((len-1)<=1){
                    $(obj).hide()
                }
            }
        // 选择图片
            function selectpic(obj,n,i){
                var file = obj.files[0];
                var URL = window.URL || window.webkitURL;
                tobase64(file,function(res){
                    imgs[n][i].push(res);
                })
                img_arr[n][i].push(URL.createObjectURL(file))
                $(obj).val("");console.log(img_arr)
                $(".preview"+n+i).show().html(evalImg({n:n,i:i,d:img_arr[n][i]}));console.log(img_arr[n][i])
                if(img_arr[n][i].length>=3){
                    $(".input"+n+i).hide();
                }
            }
        // 删除图片
            function del(obj,n,i,j){
                imgs[n][i].splice(j,1);
                img_arr[n][i].splice(j,1);console.log(img_arr[n])
                if(img_arr.length){
                    $(".preview"+n+i).html(evalImg({n:n,i:i,d:img_arr[n][i]}));
                }else{
                    $(".preview"+n+i).hide()
                }
                $(".input"+n+i).show();
            }
        // 提交表单
            var submited = false;
            $(".form").submit(function(e){console.log(submited)
                e.preventDefault();
                with(this){
                    for (var i = 0; i < this.length; i++) {
                        if($(this[i]).attr("request")==""){
                            if(!checkone(this[i])){
                                return false;
                            }
                        }
                    }
                    if(submited) return false;console.log(imgs)
                    for (var i = 0; i < imgs.length; i++) {
                        info.push([]);
                        for (var j = 0; j < imgs[i].length; j++) {
                            info[i].push($(".info"+i+j).val());
                        }
                    }
                    console.log(info)
                    $.post("/business/user/farmer-experience/add-travel",{title:title.value,info:info,imgs:imgs,hid:$('#hid').val(),oid:$('#oid').val(),_csrf:$('#_csrf').val()},function(res){
                        submited = true;
                        toast("attention",res.msg,function(){
                            if(res.status == 0 && res.url){
                                location.href = res.url;
                            }
                        });
                    },"json")
                }
            })
    </script>
</body>
</html>
